$(function () {
    // 获取全局变量，方便后面使用，不用一直获取 变量保存dom节点
    var $username = $("#username");
    var $pwd = $("#pwd");
    var $pwd1 = $("#pwd1");
    var $nickname = $("#nickname");
    var $email = $("#email");
    // 定义4个标杆
    var uFlag = false, pFlag = false, nFlag = false, eFlag = false;
    // 表单失去焦点触发事件
    $username.blur(function () {
        //checkInput(obj,reg,msg)这是个函数，封装的函数有return res 可以知道这个是true or false
        var result = checkInput($username, /^[a-zA-Z0-9\u2E80-\u9FFF._-]{3,16}$/, "请输入两位以上的用户名")
        if (result) {//如果正则表达式通过，则调用ajax接口来验证用户名是否重复
            $.ajax({
                url: "http://localhost:8848/accrepeat.php",
                type: "GET",
                data: "username=" + $username.val(),
                success: function (data) {
                    // 看接口文档 用户名重复就是fail
                    if (data == "fail") {
                        $username.css({
                            "border": "1px solid red",
                        }).next().html("用户名已存在");
                        uFlag = false;
                    } else {
                        $username.css({
                            "border": "1px solid #0eeb0e",
                        }).next().html("");
                        uFlag = true;
                    }
                }
            })
        }
    })
    $pwd.blur(function () {
        pFlag = checkInput($pwd, /^[0-9a-zA-Z_]{6,15}$/, "密码格式不正确")
    })
    // 确认密码
    $pwd1.blur(function () {
        if (pFlag) {
            if ($pwd.val() == $pwd1.val()) {
                pFlag = true;
                $pwd1.css({
                    "border": "1px solid #0eeb0e",
                }).next().html("");
            } else {
                pFlag = false;
                $pwd1.css({
                    "border": "1px solid red",
                }).next().html("两次密码不一致");
            }
        } else {
            pFlag = false;
            $pwd1.css({
                "border": "1px solid red",
            }).next().html("两次密码不一致");

        }
    })
    $nickname.blur(function () {
        nFlag = checkInput($nickname, /^[a-zA-Z0-9\u2E80-\u9FFF._-]{3,16}$/, "请输入两位以上的昵称")
    })
    $email.blur(function () {
        eFlag = checkInput($email, /^([a-zA-Z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/, "邮箱格式不正确")
    })

    // 封装函数,实现五个表框的正则表达式
    function checkInput(obj, reg, msg) {
        var res = reg.test(obj.val());
        //判断输出 结果是否为true
        if (res) {//如果输出true
            obj.css({
                "border": "1px solid #0eeb0e",
            }).next().html("");

        } else {//如果输出false
            obj.css({
                "border": "1px solid red",
            }).next().html(msg);

        }
        return res; //返回正则表达式的结果 true or false 函数的返回值
    }

    // 给注册按钮添加点击事件,
    $(".reg-btn").click(function () {
        // 点击注册按钮，若表框里面是空白的则注册不了， 这个李勇target事件
        if (!(uFlag && pFlag && nFlag && eFlag)) {//判断表格里面是空的，如果空的就点不了

            $username.blur()
            $pwd.blur();
            $pwd1.blur();
            $nickname.blur();
            $email.blur();
            return false;
        }
        // 以上没有问题后就可以调用接口
        $.ajax({
            url: "http://localhost:8848/reg.php",
            type: "POST",
            data: {
                username: $username.val(),
                pwd: $pwd.val(),
                email: $email.val(),
                nickname: $nickname.val(),
            },
            success: function (res) {
                if (res == "ok") {//成功
                    alert($username.val() + " 注册成功");
                    location.href = "./login.html";
                } else {//失败
                    alert(" 注册失败");
                }
            }


        })
    })
})